<template>
  <el-form ref="ruleForm" label-width="100px" v-loading="loading">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>门店详情</span>
      </div>
      <div>
        <el-row v-if="detailData">
          <el-col :span="12"
            ><el-form-item label="门店账号">{{ detailData.storeCode | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="门店名称">{{ detailData.storeName | notitle }}</el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="店铺分类">
              <template v-if="shopClass && shopClass.length">
                <template v-for="item of shopClass">
                  <el-tag size="small" v-if="detailData.storeType == item.value" :key="item.id">{{ item.label }}</el-tag>
                </template>
              </template>
              <template v-else>
                <label>无</label>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="具体地址">{{ detailData.fullAddress | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="线上店铺"
              ><el-tag size="small">{{ detailData.isPhysicalStore == 1 ? '是' : '否' }}</el-tag></el-form-item
            ></el-col
          >
          <el-col :span="12"
            ><el-form-item label="门店状态"
              ><el-tag size="small">{{ detailData.status == 1 ? '已绑定' : '未绑定' }}</el-tag></el-form-item
            ></el-col
          >
          <el-col :span="12"
            ><el-form-item label="商户名称">{{ detailData.mchName | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="商户编码">{{ detailData.mchId | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="门店logo"> <app-uploader :limit="-1" :initFiles="detailData.storeLogo ? [detailData.storeLogo] : null" disabled></app-uploader> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="门店实景图"><app-uploader :limit="-1" :initFiles="detailData.storeImg ? [detailData.storeImg] : null" disabled></app-uploader></el-form-item
          ></el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card margin_top_20">
      <div slot="header" class="clearfix">
        <span>经营者信息</span>
      </div>
      <div>
        <el-row v-if="detailData">
          <el-col :span="12"
            ><el-form-item label="门店负责人">{{ detailData.contacts | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="联系方式">{{ detailData.contactPhone | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="门店邮箱">{{ detailData.email | notitle }}</el-form-item></el-col
          >
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card margin_top_20">
      <div slot="header" class="clearfix">
        <span>营业信息</span>
      </div>
      <div>
        <el-row v-if="detailData">
          <el-col :span="12"
            ><el-form-item label="纳税人识别号">{{ detailData.taxpayerNo | notitle }}</el-form-item></el-col
          >
          <el-col :span="24"
            ><el-form-item label="营业执照附件"> <app-uploader :limit="-1" :initFiles="detailData.licenseImg ? [detailData.licenseImg] : null" disabled></app-uploader> </el-form-item
          ></el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card margin_top_20">
      <div slot="header" class="clearfix">
        <span>设备信息</span>
      </div>
      <div>
        <el-table max-height="720" :data="tableList" stripe :header-cell-style="tableHeaderStyle" v-loading="loading1">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="equipmentNo" label="设备编号"></el-table-column>
          <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
          <el-table-column prop="userCount" label="绑定人数"></el-table-column>
          <el-table-column prop="status" label="设备在线状态">
            <template slot-scope="scope">
              <el-tag size="small" v-if="scope.row.status == 0">在线</el-tag>
              <el-tag size="small" v-else>离线</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="enableStatus" label="是否启用">
            <template slot-scope="scope">
              <el-switch :value="scope.row.enableStatus == 0"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="activationTime" label="激活时间"></el-table-column>
        </el-table>
        <div class="text-center">
          <br />
          <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- <div class="margin_top_20 text-center"><el-button @click="goback()">返回</el-button></div> -->
  </el-form>
</template>

<script>
import Setting from '@/settings'
import AppUploader from '@/components/AppUploader/index'
import { GetMerchantDeviceList, GetMerchantShopDetail } from '@/views/merchant-management/services'
export default {
  components: { AppUploader },
  data() {
    return {
      loading: true,
      shopClass: [
        { value: 1, label: '平台' },
        { value: 2, label: '加盟' },
        { value: 3, label: '自营' },
        { value: 4, label: '联盟' },
        { value: 5, label: '专卖' },
        { value: 6, label: '其他' },
      ],
      detailData: null,
      pageIndex: 1,
      pageCount: 0,
      loading1: false,
      tableList: [],
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
    }
  },
  filters: {
    notitle(val) {
      return val ? val : '无'
    },
  },
  created() {
    this.getMerchantDetail()
    this.getDeviceList()
  },
  methods: {
    async getMerchantDetail() {
      // 门店详情基本信息
      this.loading = true
      GetMerchantShopDetail({ id: this.$route.query.id })
        .finally(() => (this.loading = false))
        .then(data => {
          if (data && data.code == 200) {
            this.detailData = data.data
          }
        })
    },
    handlePagingChange(event) {
      this.pageIndex = event
      this.getDeviceList()
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getDeviceList()
    },
    getDeviceList() {
      this.loading1 = true
      GetMerchantDeviceList({
        mchId: JSON.parse(this.$store.getters.userInfo).mchId,
        pageNum: this.pageIndex2,
        pageSize: this.pageSize2,
      })
        .finally(() => (this.loading1 = false))
        .then(data => {
          if (data && data.code == 200) {
            this.tableList = data.data.list
            this.pageCount = data.data.total
          }
        })
    },
    goback() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
